const tbody=document.querySelector('tbody');
// 渲染页面
function init() {
    // 取数据渲染
    axios({
        url:'/score/list'
    }).then(res=>{
        console.log(res);
        let obj=res.data.data
        // 渲染页面
        let htmlStr=''
        for (const key in obj) {
            htmlStr+= `<tr data-id="${key}">
                        <th scope="row">${key}</th>
                        <td>${obj[key].name}</td>
                        <td class="score"data-batch="1">${obj[key].score[0]}</td>
                        <td class="score"data-batch="2">${obj[key].score[1]}</td>
                        <td class="score"data-batch="3">${obj[key].score[2]}</td>
                        <td class="score"data-batch="4">${obj[key].score[3]}</td>
                        <td class="score"data-batch="5">${obj[key].score[4]}</td>
                    </tr>`
        }
        tbody.innerHTML=htmlStr;
    })
}
init();
// tbody  添加监听事件
tbody.addEventListener('click',function (e) {
     // let td=e.target.parentNode;
    let td=e.target;
    if(e.target.classList.contains('score')){
        // console.log(123);
    // 创建一个input
    let myinput=document.createElement('input')
    let score=td.innerText;
    td.innerHTML=''
    // 追加到 td中
    td.appendChild(myinput);
    
    myinput.focus();
    myinput.value=score;
    myinput.select()
    //失焦  删除input
    myinput.addEventListener('blur',function () {
        td.innerText=score
    })
    
    myinput.addEventListener('keydown',function (e) {
        if(e.code=='Enter'){
            // console.log(td.parentNode.dataset.id);
            axios({
            url: '/score/entry',
            method: 'POST',
            data: {
              stu_id: td.parentNode.dataset.id,
              batch: td.dataset.batch,
              score: myinput.value // 当前输入框中的成绩
            }
          }).then(res => {
            // 先将输入框移除
            // 清空页面， 标签并没有删除
            // 标签的还可以使用
            td.innerHTML = ''
            td.innerText = myinput.value
            toastr.success('成功录入或修改成功')
          })
           
        }
        
    })

    }
})